<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

<style>
      .myregbutton{
 		left: 50px;
 		bottom:9px;
 		position: absolute;
      }
      
      #headerRight{
      position: relative;
      }
</style>

<script>
	changeUser("Csutomer");
	changeUser("Designer");
	function show(){
		document.getElementById("user").style.display = "block";
	}
	function hide(){
		document.getElementById("user").style.display = "none";
	}
</script>

<div id="headerRight">
<div id="user"><s:radio name="user" label="" key="type" list="{'Designer','Customer'}" value="'Designer'" onChange="changeUser(this.value);return false;" /></div>
	
	<div id="designer">
		<s:set name="loginCheck" value="%{#session.login}"/>
		<s:set name="customerLoginCheck" value="%{#session.customerLogin}" />
		<s:if test="%{#loginCheck!=null}">
				<script type="text/javascript">
				document.getElementById("user").style.display = "none";
					document.getElementById("customer").style.display = "none";
					document.getElementsByName("user")[0].checked = true;
			    </script>
				Welcome, <s:property value="%{#loginCheck}" />  !
				<s:form action="logout">
					<s:submit value="Logout" type="button" onclick="show" />
				</s:form>
		</s:if >
		<s:elseif test="%{#customerLoginCheck==null}">
			<s:actionerror/>
			<s:form action="login">
				<s:hidden key="type" value="Designer"/>
				<s:textfield label="User Name" key="username" />
				<s:password label="Password" key="password" />
				<s:submit/>
			</s:form>
			<s:form action="toReg" >
				<s:submit cssClass="myregbutton" action="toReg" value="Designer Registration" />
			</s:form>
		</s:elseif>
	</div>
	<div id="customer">
		<s:set name="customerLoginCheck" value="%{#session.customerLogin}" />
		<s:set name="loginCheck" value="%{#session.login}"/>
		<s:if test="%{#customerLoginCheck!=null}">
				<script type="text/javascript">
					document.getElementById("designer").style.display = "none";
					document.getElementsByName("user")[1].checked = true;
					document.getElementById("user").style.display = "none";
			    </script>
				Welcome, <s:property value="%{#customerLoginCheck}" />  !
				<s:form action="customerLogout">
					<s:submit value="Logout" type="button" onclick="show" />
				</s:form>
		</s:if >
		<s:elseif test="%{#loginCheck==null}">
			<s:actionerror/>
			<s:form action="login">
				<s:hidden key="type" value="Customer"/>
				<s:textfield label="User Name" key="username" />
				<s:password label="Phone No" key="password" />
				<s:submit />
			</s:form>
			<s:form action="toReg" >
				<s:submit cssClass="myregbutton" action="toReg" value="Designer Registration" />
			</s:form>
		</s:elseif>
	</div>
</div>

<script type="text/javascript">
	function changeUser(value){
		if(value == "Customer"){
			document.getElementById("designer").style.display = "none";
			document.getElementById("customer").style.display = "block";
		}
		else{
			document.getElementById("designer").style.display = "block";
			document.getElementById("customer").style.display = "none";
		}
	}
	var userValue = document.getElementsByName("user")[0].checked;
	if(userValue){
		document.getElementById("designer").style.display = "block";
		document.getElementById("customer").style.display = "none";
	}
	else{
		document.getElementById("designer").style.display = "none";
		document.getElementById("customer").style.display = "block";
	}
</script>